import React from "react";
import { Button,Layout,Menu,Pagination } from 'element-react';
import 'element-theme-default';
import {connect} from "react-redux";
import {fetchNewsCate,fetchGoods,fetchCateChild,addToCart} from "../actions/actions";

import {formatDateTime} from '../date'

class News extends React.Component{
    componentDidMount(){
      this.props.fetchNewsCate(2);
      this.props.fetchGoods(1,8);
    }
    onSelect(node){
      this.props.fetchCateChild(node);
    }
    search(){
      this.props.fetchGoods(1,8,null,this.refs.inp.value);
    }
    addCart(e){
        var index = e.target.getAttribute("data-idx");
        var newGoods = this.props.goods.rows[index];
        this.props.addToCart(newGoods);
    }

    render () {
        var onCurrentChange = (e) => {
          this.props.fetchGoods(e.target.innerText,8,this.props.cateChild);
        }
        var cate = this.props.newsCate;
        var getGoods = this.props.goods.rows;
        var cates = [];
        var goods = [];
        var page = [];
        var limit = this.props.goods.limit
        limit=limit?limit:8;
        for(var i=0;i<cate.length;i++){
          if(!cate[i].parentId){
            cates.push(
              <Menu.Item index={cate[i]._id}>{cate[i].title}</Menu.Item>
            )
          }
        }
        if(getGoods){
          for(let i=0;i<getGoods.length;i++){
            var img = "http://127.0.0.1:3000/"+getGoods[i].thumb[0].filename;
            goods.push(
                <div className="col-lg-3 col-md-4 col-sm-6">
                    <div className="thumbnail">
                        <img className="goodsImg" src={img}/>
                        <div className="caption">
                            <p className="priceColor">￥{getGoods[i]._price}元</p>
                            <p className="goodsCont"><strong>{getGoods[i].title}</strong></p>
                            <div className="clearfix">
                                <p className="left l_color">品牌：{getGoods[i].brand
                                }</p>
                                <p className="right r_color">评价：{getGoods[i].comNum}</p>
                            </div>
                            <div className="clearfix">
                                <a className="btn btn-info right btn-sm" type="button"  data-idx={i} onClick={(e) => {this.addCart(e)}}>加入购物车</a>
                            </div>
                        </div>
                    </div>
            </div>
            )
          }
        }
        for(let i=1;i<=Math.ceil(this.props.goods.total/limit);i++){
          page.push(
            <li><a key={i} href="javascript:void(0)" onClick={(e) => onCurrentChange(e)}>{i}</a></li>
          )
        }
        return (
           <div>
              {/*导航栏,新闻选择*/}
              <div className="autoAll clearfix nav_top">
                  <div className="left nav_left">
                      <Menu  defaultActive="1" className="el-menu-demo" mode="horizontal" onSelect={this.onSelect.bind(this)}>
                        {cates}
                      </Menu>
                  </div>
                  <div className="left nav_right">
                      <input type="text" placeholder="请输入要查询的内容" ref="inp"/>
                      <Button type="primary" icon="search" onClick={this.search.bind(this)}>搜索</Button>
                  </div>
              </div>

              {/*列表*/}
              <div className="autoAll clearfix">
                <div className="row">
                    {goods}
                </div>
              </div>

              {/*分页*/}
              <div className="autoAll clearfix content_bot">
                <div className="right page">
                  {/*<Pagination layout="total,prev, pager,next" total={this.props.news.total} pageSize={limit} currentPage={1} onCurrentChange={this.onCurrentChange.bind(this)}/>*/}
                    <ul className="pagination">
                        <li>
                          <a href="javascript:void(0)" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                        {page}
                        <li>
                          <a href="javascript:void(0)" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>
                    </ul>
              
                </div>
              </div>
          
           </div>
        )
    }
}

const mapStateToProps = (state) => {
  return {
      newsCate:state.reducer.newsCate,
      goods:state.reducer.goods,
      cateChild:state.reducer.cateChild,
      carts:state.reducer.carts,

  }
}

const NewNews = connect(
  mapStateToProps,
  {fetchNewsCate,fetchGoods,fetchCateChild,addToCart},

)(News);
module.exports = NewNews;